<template>
    <div>
        <div class="conta_main" v-if="searchForms.data.queryTypes=='a2'">
            <div v-for="(tableItem, tableIndex) in columnList" :key="tableIndex">
                <div style="display: flex;align-items: baseline;"><h4>{{tableItem.name}}</h4><span class="score_tag" v-if="tableItem.type">取值：{{tableItem.type}}</span></div>
                <!-- :cell-style="cellStyle" -->
                <el-table
                    :data="props.dataList[tableItem.list] && props.dataList[tableItem.list]['classList']" border highlight-current-row 
                    @sort-change="sortChange($event, props.dataList[tableItem.list] && props.dataList[tableItem.list]['classList'])" :height="400" 
                    :summary-method="tableItem['getSummaries']" show-summary
                    class="table student-down-table tabs" :ref="`multipleTable${tableIndex+1}`" 
                    :header-cell-style="{background: '#f1f1f1', color: '#333',borderColor: 'rgb(193 193 193)'}">
                    <el-table-column label="班级名称" prop="className" align="center" min-width="90" header-align="center" fixed>
                        <template #default="scope">
                            <el-button link type="primary" @click="toClassKanban(scope.row, tableItem['scoreType'])" class="idAddName">{{scope.row.className}}</el-button>   
                        </template>
                    </el-table-column>
                    <el-table-column label="科目" prop="subjectName" align="center" header-align="center" fixed></el-table-column>
                    <el-table-column label="授课教师" prop="teacherName" align="center" header-align="center" fixed></el-table-column>
                    <template v-for="(item,index) in columns.data[tableItem.column]" :key="index">
                        <el-table-column :label="item.name" width="90" :prop="item.prop" align="center" header-align="center" :sort-orders="['ascending', 'descending']" sortable="column"></el-table-column>
                        <el-table-column label="上线率" width="100" :prop="item.rate" align="center" header-align="center" :sort-orders="['ascending', 'descending']" sortable="column"></el-table-column>
                    </template>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script setup>//查询维度-上线人数
import wrongTr from '@/mixin/wrongTr';
import {sort} from '@/utils/helper';
import { getCurrentInstance, nextTick, onMounted, reactive, watch } from 'vue';
let props = defineProps({
    dataList: Object,
    searchForm: Object,
})
const instance = getCurrentInstance();
let searchForms= reactive({
    data: {}
});
let dataLists = reactive({
    data: {}
});
let columnList = reactive([]);
let columns = reactive({
    data: {
        table1Column: [
            {name:'5%',prop: 'p5',rate: 'line5'},{name:'10%',prop: 'p10',rate: 'line10'},{name:'15%',prop: 'p15',rate: 'line15'},
            {name:'20%',prop: 'p20',rate: 'line20'},{name:'25%',prop: 'p25',rate: 'line25'},{name:'30%',prop: 'p30',rate: 'line30'},
            {name:'35%',prop: 'p35',rate: 'line35'},{name:'40%',prop: 'p40',rate: 'line40'},{name:'45%',prop: 'p45',rate: 'line45'},
            {name:'50%',prop: 'p50',rate: 'line50'},{name:'55%',prop: 'p55',rate: 'line55'},{name:'60%',prop: 'p60',rate: 'line60'},
            {name:'65%',prop: 'p65',rate: 'line65'},{name:'70%',prop: 'p70',rate: 'line70'},{name:'75%',prop: 'p75',rate: 'line75'},
            {name:'80%',prop: 'p80',rate: 'line80'},{name:'85%',prop: 'p85',rate: 'line85'},{name:'90%',prop: 'p90',rate: 'line90'},
            {name:'95%',prop: 'p95',rate: 'line95'},{name:'95%-',prop: 'p951',rate: 'line951'},
        ],
        table2Column: [
            {name: '北清线', prop: 'scorebq',rate:'linebq'},{name: '985', prop: 'score985',rate: 'line985'},{name: '211', prop: 'score211',rate: 'line211'},
            {name: '一本', prop: 'score1',rate:'line1'},{name: '老二本', prop: 'score2',rate: 'line2'},{name: '本科', prop: 'scoreBasic',rate: 'lineBasic'},
            {name: '本科-', prop: 'scoreBasic1',rate:'lineBasic1'}
        ]
    }
});
let sumlist= reactive([]);
const emit = defineEmits(['classTo1']);//获取父组件的方法emit
onMounted(()=>{
    searchForms.data = props.searchForm;
    dataLists.data = props.dataList;
    getData();
});
/**
 * 格式化数据 
 */
let getData=()=>{
    Object.keys(props.dataList).forEach(function(key){
        let datas = props.dataList[key];
        let dataList = JSON.parse(JSON.stringify(datas));
        // //分别记录一下每一个要循环表格的 最后一行数据（相当于表格尾行固定行）  
        // if(dataList[dataList.length-1] && dataList[dataList.length-1]['className'] == '年级'){
        //     if(_this.sumlist.length==_this.columnList.length){//初始化sumlist
        //         _this.sumlist = [];
        //     }
        //     _this.sumlist.push(dataList.pop());
        //     _this.dataList[key] =  dataList;
        // }
    })         
    /*   console.log(this.sumlist,'sumlist')
    console.log(this.dataList,'dataList') */
    dataLists.data = props.dataList;
    getColumnList(); 
    setTimeout(()=>{
        columnList.forEach((item,index)=>{
            if(instance.refs['multipleTable'+(index+1)]){
                instance.refs['multipleTable'+(index+1)][0].doLayout();
            }
        })      
    }, 100)
                    
};
//根据权限显示
let getColumnList=()=>{
    columnList = [];
    if(searchForms.data.grades=='a17'){
        columnList = [
        {name:'1.1本段人数-分析线标准',list: 'bareaPercent',column: 'table1Column',type: '原始分', getSummaries: getSummaries1,scoreType: 0},{name:'1.2本段人数-精华工作线',list: 'bjhLine',column: 'table2Column',type: '等级分',getSummaries: getSummaries3,scoreType: 1},
        {name:'2.1累计人数-分析线标准',list: 'lareaPercent',column: 'table1Column',type: '原始分', getSummaries: getSummaries2,scoreType: 0},{name:'2.2累计人数-精华工作线',list: 'ljhLine',column: 'table2Column',type: '等级分',getSummaries: getSummaries4,scoreType: 0}]
    }else if(searchForms.data.grades=='a14' || searchForms.data.grades=='a11'){
        columnList = [
            {name:'1.1本段人数-分析线标准',list: 'bareaPercent',column: 'table1Column',type: '原始分', getSummaries: getSummaries1},
            {name:'2.1累计人数-分析线标准',list: 'lareaPercent',column: 'table1Column',type: '原始分', getSummaries: getSummaries2}
        ];
    }    
};
 /**
 * 循环表格自定义循环 尾行固定
 * @param 自动求和默认参数
 * @indexs 当前表格index 从sublist取具体数据
 * */
// getSummaries(param, indexs, list){  
//求和
let getSummaries1=(param)=>{
    const { columns, data } = param;
    const sums = [];         
    // if(!columns.length) return sums;
    // if(!_this.$refs['multipleTable'+(indexs+1)]) return sums;
    let gradeList = props.dataList['bareaPercent'] && props.dataList['bareaPercent']['gradeList']&&props.dataList['bareaPercent']['gradeList'][0];
    if(!gradeList){ return false; }
    columns.forEach((column, index) => {
    //     let property = column['property'];
    //     sums[index]= _this.sumlist[indexs][property];
    
    // })               

    // return sums;   
        sums.push(gradeList[column['property']]);         
    });                             
    return sums;
};
let getSummaries2=(param)=>{
    const { columns, data } = param;
    const sums = [];
    let gradeList = props.dataList['lareaPercent'] && props.dataList['lareaPercent']['gradeList']&&props.dataList['lareaPercent']['gradeList'][0];
    if(!gradeList){ return false; }
    columns.forEach((column, index) => {
        sums.push(gradeList[column['property']]);         
    });                             
    return sums;
};
let getSummaries3=(param)=>{
    const { columns, data } = param;
    const sums = [];
    let gradeList = props.dataList['bjhLine'] && props.dataList['bjhLine']['gradeList']&&props.dataList['bjhLine']['gradeList'][0];
    if(!gradeList){ return false; }
    columns.forEach((column, index) => {
        sums.push(gradeList[column['property']]);         
    });                             
    return sums;
};
let getSummaries4=(param)=>{
    const { columns, data } = param;
    const sums = [];
    let gradeList = props.dataList['ljhLine'] && props.dataList['ljhLine']['gradeList']&&props.dataList['ljhLine']['gradeList'][0];
    if(!gradeList){ return false; }
    columns.forEach((column, index) => {
        sums.push(gradeList[column['property']]);         
    });                             
    return sums;
};
//表格数据最后一行 行样式
let cellStyle=({row, column, rowIndex, columnIndex})=>{
    for(let i=0; i< columnList.length; i++){
        let tableItem = columnList[i];
        let tableIndex = i;
        if(rowIndex ===  props.dataList[tableItem['list']].length-1){ //指定坐标rowIndex ：行，columnIndex ：列
            return 'background:#F5F7FA' //rgb(105,0,7)
        }else{
            return ''
        }
    }
};
let initPage=()=>{
    // nextTick(()=>{
        searchForms.data = props.searchForm;
        dataLists.data = props.dataList;
        getData();
    // })    
};
/**
 * 表头排序
 */
let sortChange=(val, dataList)=>{ 
    sort(dataList, val.prop, val.order=='ascending');
};
watch(()=>searchForms.data.grades, (val)=>{
    initPage();
}, {deep: true});
watch(()=>searchForms.data.subjectId, (val)=>{
    initPage();
}, {deep: true});
watch(()=>props.dataList, (val)=>{
    initPage();
}, {deep: true});
   //班级看板 classType: 0行政班；1教学班；
let toClassKanban=(row, scoreType)=>{
    let params = {
        className:row.className,
        classId:row.classId,//班级ID
        isScoreType: props.dataList['grade'] == 17, //分数类型 0原始分 1等级分   高三才有等级分，其他默认原始分
        scoreType: scoreType || 0,//0原始分 1等级分
        yearly: props.searchForm.yearly,
        testId: props.dataList['testIdA'],
        testIdA: props.dataList['testIdA'],//考试批次ID
        testIdB: props.dataList['testIdB'],
        subjectId: row.subjectId,
        subjectName: row.subjectName,
        grade: props.searchForm.grade,//年级
        classType: row.classType,//classType: 0行政班；1教学班；
    }
    emit('classTo1', params);
};
// export default {
//     name: 'onlineNum2',//查询维度-上线人数
//     // mixins: [wrongTr],
//     props: {
//         dataList: Object,
//         searchForm: Object,
//     },
//     data(){
//         return {
//             sort: sort,
//             searchForms: {},
//             dataLists: {},
//             columnList: [],
//             columns: {
//                 table1Column: [
//                     {name:'5%',prop: 'p5',rate: 'line5'},{name:'10%',prop: 'p10',rate: 'line10'},{name:'15%',prop: 'p15',rate: 'line15'},
//                     {name:'20%',prop: 'p20',rate: 'line20'},{name:'25%',prop: 'p25',rate: 'line25'},{name:'30%',prop: 'p30',rate: 'line30'},
//                     {name:'35%',prop: 'p35',rate: 'line35'},{name:'40%',prop: 'p40',rate: 'line40'},{name:'45%',prop: 'p45',rate: 'line45'},
//                     {name:'50%',prop: 'p50',rate: 'line50'},{name:'55%',prop: 'p55',rate: 'line55'},{name:'60%',prop: 'p60',rate: 'line60'},
//                     {name:'65%',prop: 'p65',rate: 'line65'},{name:'70%',prop: 'p70',rate: 'line70'},{name:'75%',prop: 'p75',rate: 'line75'},
//                     {name:'80%',prop: 'p80',rate: 'line80'},{name:'85%',prop: 'p85',rate: 'line85'},{name:'90%',prop: 'p90',rate: 'line90'},
//                     {name:'95%',prop: 'p95',rate: 'line95'},{name:'95%-',prop: 'p951',rate: 'line951'},
//                 ],
//                 table2Column: [
//                     {name: '北清线', prop: 'scorebq',rate:'linebq'},{name: '985', prop: 'score985',rate: 'line985'},{name: '211', prop: 'score211',rate: 'line211'},
//                     {name: '一本', prop: 'score1',rate:'line1'},{name: '老二本', prop: 'score2',rate: 'line2'},{name: '本科', prop: 'scoreBasic',rate: 'lineBasic'},
//                     {name: '本科-', prop: 'scoreBasic1',rate:'lineBasic1'}
//                 ]
//             },
//             sumlist: [],
//         }
//     },
//     mounted(){
     
//         this.$nextTick(()=>{
//             this.searchForms = this.searchForm;
//             this.dataLists = this.dataList;
//             this.getData();
//         })
//     },
//     watch: {
//         'searchForms.grades':{
//             handler: function(val){
//                 this.initPage();
//             },
//             deep: true
//         },
//         'searchForms.subjectId':{
//             handler: function(val){
//                 this.initPage();        
//             },
//             deep: true
//         },
//         "dataList": function () {
//             let _this = this;
//             this.initPage();
//         },
//     },
//     methods: {
//         //表格数据最后一行 行样式
//         cellStyle({row, column, rowIndex, columnIndex}){
//             for(let i=0; i< this.columnList.length; i++){
//                 let tableItem = this.columnList[i];
//                 let tableIndex = i;
//                 if(rowIndex ===  this.dataList[tableItem['list']].length-1){ //指定坐标rowIndex ：行，columnIndex ：列
//                     return 'background:#F5F7FA' //rgb(105,0,7)
//                 }else{
//                     return ''
//                 }
//             }
//         },
//         initPage(){
//             this.$nextTick(()=>{
//                 this.searchForms = this.searchForm;
//                 this.dataLists = this.dataList;
//                 this.getData();
//             })    
//         },
//         /**
//          * 表头排序
//          */
//         sortChange(val, dataList){ 
//             this.sort(dataList, val.prop, val.order=='ascending');
//         },
//         /**
//          * 格式化数据 
//          */
//         getData(){
//             let _this = this;
//             Object.keys(_this.dataList).forEach(function(key){
//                 let datas = _this.dataList[key];
//                 let dataList = JSON.parse(JSON.stringify(datas));
//                 // //分别记录一下每一个要循环表格的 最后一行数据（相当于表格尾行固定行）  
//                 // if(dataList[dataList.length-1] && dataList[dataList.length-1]['className'] == '年级'){
//                 //     if(_this.sumlist.length==_this.columnList.length){//初始化sumlist
//                 //         _this.sumlist = [];
//                 //     }
//                 //     _this.sumlist.push(dataList.pop());
//                 //     _this.dataList[key] =  dataList;
//                 // }
//             })         
//           /*   console.log(this.sumlist,'sumlist')
//             console.log(this.dataList,'dataList') */
//             this.dataLists = this.dataList;
//             _this.$nextTick(()=>{
//                 _this.getColumnList(); 
//                 setTimeout(()=>{
//                     _this.columnList.forEach((item,index)=>{
//                         if(_this.$refs['multipleTable'+(index+1)]){
//                             _this.$refs['multipleTable'+(index+1)][0].doLayout();
//                         }
//                     })      
//                 }, 100)
                         
//             })
//         },
        
//         /**
//          * 循环表格自定义循环 尾行固定
//          * @param 自动求和默认参数
//          * @indexs 当前表格index 从sublist取具体数据
//          * */
//         // getSummaries(param, indexs, list){  
//         //求和
//         getSummaries1(param){
//             let _this =this;   
//             const { columns, data } = param;
//             const sums = [];         
//             // if(!columns.length) return sums;
//             // if(!_this.$refs['multipleTable'+(indexs+1)]) return sums;
//             let gradeList = this.dataList['bareaPercent'] && this.dataList['bareaPercent']['gradeList']&&this.dataList['bareaPercent']['gradeList'][0];
//             if(!gradeList){ return false; }
//             columns.forEach((column, index) => {
//             //     let property = column['property'];
//             //     sums[index]= _this.sumlist[indexs][property];
            
//             // })               

//             // return sums;   
//                 sums.push(gradeList[column['property']]);         
//             });                             
//             return sums;
//         },
//         getSummaries2(param){
//             let _this =this;   
//             const { columns, data } = param;
//             const sums = [];
//             let gradeList = this.dataList['lareaPercent'] && this.dataList['lareaPercent']['gradeList']&&this.dataList['lareaPercent']['gradeList'][0];
//             if(!gradeList){ return false; }
//             columns.forEach((column, index) => {
//                 sums.push(gradeList[column['property']]);         
//             });                             
//             return sums;
//         },
//         getSummaries3(param){
//             let _this =this;   
//             const { columns, data } = param;
//             const sums = [];
//             let gradeList = this.dataList['bjhLine'] && this.dataList['bjhLine']['gradeList']&&this.dataList['bjhLine']['gradeList'][0];
//             if(!gradeList){ return false; }
//             columns.forEach((column, index) => {
//                 sums.push(gradeList[column['property']]);         
//             });                             
//             return sums;
//         },
//         getSummaries4(param){
//             let _this =this;   
//             const { columns, data } = param;
//             const sums = [];
//             let gradeList = this.dataList['ljhLine'] && this.dataList['ljhLine']['gradeList']&&this.dataList['ljhLine']['gradeList'][0];
//             if(!gradeList){ return false; }
//             columns.forEach((column, index) => {
//                 sums.push(gradeList[column['property']]);         
//             });                             
//             return sums;
//         },
//         //根据权限显示
//         getColumnList(){
//             let _this = this;
//             this.columnList = [];
//             if(this.searchForms.grades=='a17'){
//                 this.columnList = [
//                 {name:'1.1本段人数-分析线标准',list: 'bareaPercent',column: 'table1Column',type: '原始分', getSummaries: this.getSummaries1,scoreType: 0},{name:'1.2本段人数-精华工作线',list: 'bjhLine',column: 'table2Column',type: '等级分',getSummaries: this.getSummaries3,scoreType: 1},
//                 {name:'2.1累计人数-分析线标准',list: 'lareaPercent',column: 'table1Column',type: '原始分', getSummaries: this.getSummaries2,scoreType: 0},{name:'2.2累计人数-精华工作线',list: 'ljhLine',column: 'table2Column',type: '等级分',getSummaries: this.getSummaries4,scoreType: 0}]
//             }else if(this.searchForms.grades=='a14' || this.searchForms.grades=='a11'){
//                 this.columnList = [
//                     {name:'1.1本段人数-分析线标准',list: 'bareaPercent',column: 'table1Column',type: '原始分', getSummaries: this.getSummaries1},
//                     {name:'2.1累计人数-分析线标准',list: 'lareaPercent',column: 'table1Column',type: '原始分', getSummaries: this.getSummaries2}
//                 ];
//             }    
//         },
//         //班级看板 classType: 0行政班；1教学班；
//         toClassKanban(row, scoreType){
//             let params = {
//                 className:row.className,
//                 classId:row.classId,//班级ID
//                 isScoreType: this.dataList['grade'] == 17, //分数类型 0原始分 1等级分   高三才有等级分，其他默认原始分
//                 scoreType: scoreType || 0,//0原始分 1等级分
//                 yearly: this.searchForm.yearly,
//                 testId: this.dataList['testIdA'],
//                 testIdA: this.dataList['testIdA'],//考试批次ID
//                 testIdB: this.dataList['testIdB'],
//                 subjectId: row.subjectId,
//                 subjectName: row.subjectName,
//                 grade: this.searchForm.grade,//年级
//                 classType: row.classType,//classType: 0行政班；1教学班；
//             }
//             this.$emit('classTo1', params);
//         }
//     }
// }
</script>
<style lang="scss" scoped>
.conta_main{
    h4{
        margin-top: 20px;
    }
    .score_tag{
        font-size: 14px;
        color: #02a7f0;
        margin-left: 20px;
    }
    /* 负数 */
    .minus-number{
        color: red;
    }
    .positive-number{
        color: #70B603;
    }
}
</style>